<!-- switch切换开关 -->
<template>
	<ul class="switches">
		<li class="switch-item" v-for="(item,index) in switches" :class="{'active':currentIndex === index}" @click="switchItem(index)" :key="index">
			<span>{{item.name}} </span>
		</li>
	</ul>
</template>

<script type="text/ecmascript-6">
export default {
    props: {
        switches: {
            type: Array,
            default: []
        },
        currentIndex: {
            type: Number,
            default: 0
        }
    },
    methods: {
        switchItem(index) {
            this.$emit("switch", index);
        }
    }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable'
.switches
	display flex
	align-items center
	width 240px
	margin 0 auto
	border 1px solid $color-highlight-background
	border-radius 5px
	.switch-item
		flex 1
		padding 8px
		text-align center
		font-size $font-size-medium
		color $color-text-d
		&.active
			background $color-highlight-background
			color $color-text
</style>
